<template>
    <div class="wrapper">
        <el-card>
            <div class="rowDiv">
                <div class="row-left">
                    <div class="row-item marRight">
                        <span class="demonstration">时间范围&nbsp;</span>
                        <Date @dateFun="dateFun"></Date>
                    </div>
                    <div class="row-item">
                        仓库名称&nbsp;
                        <el-select
                                v-model="state.warehouse_id"
                                placeholder="选择仓库名称"
                                clearable
                                class="warehouse"
                                @change="getOrderlist"
                        >
                            <template v-for="(item,index) in state.warehouseArr" :key="index">
                                <el-option
                                        :value="item.warehouse_id"
                                        :label="item.name"
                                ></el-option>
                            </template>
                        </el-select>
                    </div>
                </div>
                <div class="row-right">
                    <searchDiv :placeholder="state.placeholder" v-model="state.keywords"
                               @searchClick="searchClick"></searchDiv>
                    <el-button @click="unbind_all_Btn" type="primary" class="export">导出</el-button>
                </div>
            </div>
            <!--<el-table-->
                    <!--@selection-change="handleSelectionChange"-->
                    <!--ref="multipleTable" :data="state.tableData" style="width: 100%; margin-top: 20px">-->
                <!--<el-table-column type="selection"></el-table-column>-->
            <el-table :data="state.tableData" style="width: 100%; margin-top: 20px">
                <el-table-column fixed prop="id" label="编号"></el-table-column>
                <el-table-column fixed prop="warehouse" label="仓库"></el-table-column>
                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="spec" label="商品规格"></el-table-column>
                <el-table-column prop="inventory" label="库存（袋）"></el-table-column>
                <el-table-column prop="inventory_bag" label="库存（箱）"></el-table-column>
                <el-table-column prop="current_inventory" label="本期库存（袋）"></el-table-column>
                <el-table-column prop="current_inventory_bag" label="本期库存（箱）"></el-table-column>
                <el-table-column prop="goods_in" label="入库"></el-table-column>
                <el-table-column prop="goods_out" label="出库"></el-table-column>
                <el-table-column prop="allocate_in" label="调入"></el-table-column>
                <el-table-column prop="allocate_out" label="调出"></el-table-column>
                <el-table-column prop="sale" label="销售"></el-table-column>
                <el-table-column prop="sale_return" label="退回"></el-table-column>
                <el-table-column prop="purchase" label="采购入库"></el-table-column>
                <el-table-column prop="manual" label="手动调整"></el-table-column>
            </el-table>
            <!--<el-row class="marTop">-->
                <!--<el-col :span="12">-->
                    <!--<el-checkbox-->
                            <!--@change="checkAll"-->
                            <!--v-model="state.pageChecked"-->
                            <!--label="本页全选"-->
                            <!--name="type"-->
                            <!--class="marRight marLeft"-->
                    <!--&gt;</el-checkbox>-->
                    <!--<el-button @click="unbind_all_Btn">导出</el-button>-->
                <!--</el-col>-->
            <!--</el-row>-->

        </el-card>
    </div>
</template>

<script>
    import {ref, reactive, getCurrentInstance, onMounted} from "vue";
    import {useRouter} from "vue-router";
    import searchDiv from '@/components/Search.vue';
    import Page from '@/components/Pagination.vue';
    import {ElNotification} from "element-plus";
    import Date from '@/components/Datepicker.vue';
    export default {
        name:"inventory_statis",
        components: {searchDiv,Date},
        props: {},
        setup() {
            let multipleTable = ref("null");
            const {ctx} = getCurrentInstance();
            const router = useRouter();
            let state = reactive({
                placeholder: '请输入名称',
                warehouseArr: [],//仓库数据
                searchval: "",
                pageChecked: false,
                multipleSelection: [],
                tableData: [],
                warehouse_id: '',
                keywords: '',
                begin_date: '',
                end_date: '',
            });

            onMounted(() => {
                getWarehouseList();
                getOrderlist();
            });

            function searchClick(searchCon) {
                console.log("子组件", searchCon)
            }
            function dateFun(e){
                state.begin_date=e.begin_date;
                state.end_date=e.end_date;
                getOrderlist();
            }

            //选择仓库
            function warehouseChange() {
                console.log(state.warehouse)
            }

            //获取列表数据
            function getOrderlist() {
                ctx.$http.get("/tanxiaji/erp/inventory/list/", {
                    warehouse_id: state.warehouse_id,
                    keywords:  state.keywords,
                    begin_date:  state.begin_date,
                    end_date:  state.end_date,
                }).then((res) => {
                    if (res.errno == 0) {
                        var list = res.data;
                        state.tableData = list.goods_statis_list;
                    }
                }).catch((err) => {
                    ElNotification.error(err);
                });
            }

            //获取仓库数据
            function getWarehouseList() {
                ctx.$http.get("/tanxiaji/erp/depot/ajax/search/", {
                    type: 1,
                    need_agent: 1
                }).then((res) => {
                    if (res.errno == 0) {
                        var list = res.data;
                        state.warehouseArr = list;
                    }
                }).catch((err) => {
                    ElNotification.error(err);
                });
            }

            //表格选择
            function handleSelectionChange(val) {
                state.multipleSelection = val;
            }

            //导出
            function unbind_all_Btn() {
                console.log('导出')
            }

            //全选
            function checkAll() {
                state.multipleSelection = [];
                if (state.pageChecked) {
                    multipleTable.value.toggleAllSelection();
                    state.multipleSelection.push(state.tableData.filter((v) => v.date));
                } else {
                    multipleTable.value.clearSelection();
                    state.multipleSelection = [];
                }
            }

            //页码
            function changePage() {
                console.log('页码')
            }

            // 创建仓库
            return {
                multipleTable,
                handleSelectionChange,
                searchClick,
                state,
                checkAll,
                unbind_all_Btn,
                warehouseChange,
                dateFun,
                getOrderlist
            };
        },
    };
</script>
<style lang="scss" scoped>
    .wrapper {
        height: 100%;
        .el-card {
            height: 100%;
            .cart-title::before {
                content: " ";
                width: 4px;
                height: 20px;
                background: #1890ff;
                background: #1890ff;
                display: inline-block;
                vertical-align: middle;
                margin-right: 5px;
            }
            .rowDiv {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .row-left {
                    display: flex;
                    width: 40%;
                    justify-content: space-between;
                    .row-item {
                        display: flex;
                        align-items: center;
                        white-space: nowrap;
                    }
                    .warehouse {
                        min-width: 150px;
                    }
                }
                .row-right {
                    width: 30%;
                    display: flex;
                    justify-content: flex-end;
                    .export{
                        margin-left: 10px;
                    }
                }
            }
            .el-table /deep/ th {
                background-color: #eaeaea;
                text-align: center;
            }
            .el-table /deep/ td {
                text-align: center;
            }
            .el-select {
                width: 100%;
            }
            .marRight {
                margin-right: 20px;
            }
            .marTop {
                margin-top: 10px;
            }
            .marLeft {
                margin-left: 18px;
            }
        }
    }
</style>